---
title: Gradients
description: Create smooth color transitions with linear, radial, and conic gradient utilities.
---

Create smooth color transitions with linear, radial, and conic gradient utilities.

| Property             | Shorthand    | CSS Property       | Description                    |
| -------------------- | ------------ | ------------------ | ------------------------------ |
| `backgroundLinear`   | `bgLinear`   | `background-image` | Apply linear gradient effects  |
| `backgroundRadial`   | `bgRadial`   | `background-image` | Apply radial gradient effects  |
| `backgroundConic`    | `bgConic`    | `background-image` | Apply conic gradient effects   |
| `backgroundGradient` | `bgGradient` | `background-image` | Apply linear gradient (alias)  |
| `textGradient`       | -            | `background-image` | Apply gradient to text         |
| `gradientFrom`       | -            | `--gradient-from`  | Define starting gradient color |
| `gradientTo`         | -            | `--gradient-to`    | Define ending gradient color   |
| `gradientVia`        | -            | `--gradient-via`   | Define middle gradient color   |

## Examples

### Linear gradients

Use the `bgLinear` utility to create a linear gradient with a direction.

```tsx
css({ bgLinear: 'to-r', gradientFrom: 'cyan.500', gradientTo: 'blue.500' })
css({ bgLinear: 'to-t', gradientFrom: 'sky.500', gradientTo: 'indigo.500' })
css({
  bgLinear: 'to-bl',
  gradientFrom: 'violet.500',
  gradientTo: 'fuchsia.500'
})
css({ bgLinear: '65deg', gradientFrom: 'purple.500', gradientTo: 'pink.500' })
```

### Radial gradients

Build circular color transitions that radiate outward from a center point:

```tsx
css({
  bgRadial: 'in srgb',
  gradientFrom: 'pink.400',
  gradientFromPosition: '40%',
  gradientTo: 'fuchsia.700'
})
css({
  bgRadial: 'at 50% 75%',
  gradientFrom: 'sky.200',
  gradientVia: 'blue.400',
  gradientTo: 'indigo.900',
  gradientToPosition: '90%'
})
css({
  bgRadial: 'at 25% 25%',
  gradientFrom: 'white',
  gradientTo: 'zinc.900',
  gradientToPosition: '75%'
})
```

### Conic gradients

Create sweeping color transitions that rotate around a central point:

```jsx
css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'in srgb',
  gradientFrom: 'blue.600',
  gradientTo: 'sky.400',
  gradientToPosition: '50%'
})
css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'from 180deg',
  gradientFrom: 'blue.600',
  gradientVia: 'blue.50',
  gradientTo: 'blue.600'
})
css({
  boxSize: '24',
  rounded: 'full',
  bgConic: 'in oklch decreasing hue',
  gradientFrom: 'violet.700',
  gradientVia: 'lime.300',
  gradientTo: 'violet.700'
})
```

### Controlling color stops

Define which colors appear in your gradient using `gradientFrom`, `gradientVia`, and `gradientTo`:

```jsx
css({
  bgLinear: 'to-r',
  gradientFrom: 'indigo.500',
  gradientVia: 'purple.500',
  gradientTo: 'pink.500'
})
```

### Positioning color stops

Control exactly where each color appears along the gradient using position utilities:

```jsx
css({
  bgLinear: 'to-r',
  gradientFrom: 'indigo.500',
  gradientFromPosition: '10%',
  gradientVia: 'sky.500',
  gradientViaPosition: '30%',
  gradientTo: 'emerald.500',
  gradientToPosition: '90%'
})
```

### Text gradients

Apply colorful gradient effects to typography using `textGradient`:

```jsx
css({
  textGradient: 'to-r',
  gradientFrom: 'purple.400',
  gradientTo: 'pink.400',
  fontSize: '4xl',
  fontWeight: 'bold'
})
```

### Custom gradient values

Use bracket notation to create gradients with arbitrary values:

```jsx
css({
  bgLinear: '25deg',
  gradientFrom: 'red.50%',
  gradientVia: 'yellow.60%',
  gradientTo: 'lime.90%',
  gradientToPosition: 'teal.100%'
})
```

### Responsive gradients

Apply different gradient styles at different breakpoints using responsive objects:

```jsx
css({
  gradientFrom: { base: 'purple.400', md: 'yellow.500' }
})
```
